window.onload=function(){
	
	// 得到使用的元素
	var slider = document.querySelector(".slider");
	var sliderList = slider.querySelector(".slider-list");
	var sliderLi = sliderList.querySelectorAll("li");
	var LiLength = sliderLi.length;
	var LiWidth = sliderLi[0].offsetWidth;
	// console.log(LiWidth);
	// 获取左右按钮
	var leftBnt = slider.querySelector(".left");
	var rightBnt = slider.querySelector(".right");
	
	
	 var defaultId = 1; // 定义当前第一个按钮的下表
	 //自动控制,内容是否 处于移动状态
	 var isMove = false; //内容处于一定状态
	 var isHover = false;//是否处于点击切换的过渡状态中
	 
	// 设置左右按钮点击切换事件
	leftBnt.onclick = function(){
		defaultId--;
		move()	
	}
	
	rightBnt.onclick = function(){
		defaultId++;
		move()	
	}
	
	// 设置内容制动切换的
	function move(){
		console.log(defaultId);
		isMove = true;
		if(!sliderList.classList.remove("ani")){
			sliderList.classList.add("ani");
		}
		// sliderList.style.transform = "translateX(${-defaultId * LiWidth}px)"; //这句不知道怎么回事效果不出来(按照视频做的)
		sliderList.style.transform = "translateX(" + -(defaultId * LiWidth) + "px)";
		
		setBnt();
		
		sliderList.addEventListener("transitionend",function(){
			isMove = false;
		})
		
		if(defaultId==LiLength-1 || defaultId==0){
			defaultId = defaultId == 0 ? LiLength-2 : 1; 
			setBnt(); //前面(	defaultId = defaultId == 0 ? LiLength-2 : 1; )修正过,需从新执行
			// 设置监听过渡动画执行结束
			sliderList.addEventListener("transitionend",ChangeShowPoint)//不能直接写function(){}//处于特殊状态
		}
		
	}
	function ChangeShowPoint(){
			sliderList.classList.remove("ani");
			sliderList.style.transform="translateX(" + -(defaultId * LiWidth) + "px)";
			// 取消监听过渡动画  addEventListener 设置事件课重复设置
			sliderList.removeEventListener("transitionend",ChangeShowPoint)
		}
		
		
		/* 设置自动循环效果 */
		
	setInterval(function(){
		// defaultId++;
		// move()	
		
		if(isMove || isHover) return;
		defaultId++;
		move()
	},2000)
	
	slider.onmouseenter = function(){
		isHover =true;
		
	}
	slider.onmouseleave = function(){
		isHover = false;
	}
	
	//设置圆点显示位置
	function setBnt(){
		//处于特殊切换状态
		if(defaultId ==0 || defaultId ==LiLength-1){
			return;
		}
		//正常状态
		 for(var i = 0; i<bntList.length;i++){
			 if(bntList[i].classList.contains("default")){
				 bntList[i].classList.remove("default");
				 break;
			 }
		 }
		 bntList[defaultId-1].classList.add("default");
		}
	
	
}
